<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>字典管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-input v-model="select_word" class="handle-input mr10" placeholder="名称"></el-input>
      <el-button type="primary" class="mr10" icon="search" @click="search" size="small" round plain>搜索</el-button>
      <el-button type="success" class="mr10" @click="edit('add')" size="small" round plain><i class="el-icon-plus">
        添加</i></el-button>
    </div>
    <el-table
      :data="page.list"
      stripe
      :height=600
      style="width: 100%">
      <el-table-column
        prop="dicname"
        header-align="center"
        label="字典名称">
      </el-table-column>
      <el-table-column
        prop="dictype"
        header-align="center"
        label="字典类型">
      </el-table-column>
      <el-table-column
        prop="dicvalue"
        header-align="center"
        label="字典值">
      </el-table-column>
      <el-table-column
        prop="deleted"
        header-align="center"
        label="状态">
        <template scope="scope">
          <el-tag v-if="scope.row.deleted===0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.deleted===1" type="danger">删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="odr"
        sortable
        header-align="center"
        label="排序">
      </el-table-column>
      <el-table-column label="操作" width="180" header-align="center">
        <template scope="scope">
          <el-button size="small" icon="el-icon-edit"
                     @click="edit('update',scope.row)" round plain>编辑
          </el-button>
          <el-button size="small" type="danger" icon="el-icon-delete"
                     @click="handleDelete(scope.$index, scope.row)" round plain>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes:="[10, 20, 30,40, 50,100]"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      title="编辑字典信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      :before-close="dailogClose"
      center>
      <el-form :model="dict" :rules="rules" ref="dict" label-width="100px" class="demo-ruleForm">
        <el-form-item label="字典名称" prop="dicname">
          <el-input v-model="dict.dicname"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictype">
          <el-input v-model="dict.dictype"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="dicvalue">
          <el-input v-model="dict.dicvalue"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="odr">
          <el-input v-model.number="dict.odr"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dailogClose">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import common from '../../../common/constant.js'
  import {checkNumberNullable} from '../../../common/validate.js'
  import {Loading} from 'element-ui'
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item";
  export default{
    components: {ElFormItem},
    data(){
      return {
        centerDialogVisible: false,
        select_word: '',
        dict: {
          id: 0,
          dicname: '',
          dictype: '',
          dicvalue: '',
          odr: 0,
          deleted: 0
        },
        page: {
          pageNum: 1,
          pageSize: 10,
          size: 2,
          orderBy: null,
          startRow: 3,
          endRow: 4,
          total: 4,
          pages: 2,
          list: [],
          firstPage: 1,
          prePage: 1,
          nextPage: 0,
          lastPage: 2,
          isFirstPage: false,
          isLastPage: true,
          hasPreviousPage: true,
          hasNextPage: false,
          navigatePages: 8,
          navigatepageNums: [
            1,
            2
          ]
        },
        rules: {
          dicname: [
            {required: true, message: '请填写字典名称', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          dictype: [
            {required: true, message: '请填写字典类型', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          dicvalue: [
            {required: true, message: '请填写字典类型', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
          ],
          odr: [
            {type: 'number', message: '必须为数字值', trigger: 'change'}
          ],
        }
      }
    },
    created: function () {
      this.query()
    },
    methods: {
      handleSizeChange(value){
        this.page.pageSize = value
        this.query()
      },
      handleCurrentChange(val) {
        let self = this
        self.page.currentPage = val
        self.query()
      },
      handleEdit(index, row) {
        this.$message('编辑第' + (index + 1) + '行');
      },
      handleDelete(index, row) {
        let self = this
        self.$confirm('删除后不可恢复，确认删除？ *^ο^*')
          .then(_ => {
            self.$http.post('/api/dict/save', {
              'id': row.id,
              'deleted': common.recordStatus.deleted
            })
              .then((response) => {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.message_ok()
                  self.query()
                } else {
                  self.message_error()
                }
              })
              .catch(function (response) {
                self.message_error()
              })
          })
          .catch(_ => {
          });
      },
      search(){
        this.query()
      },
      dailogClose(){
        this.centerDialogVisible = false
        this.$refs['dict'].resetFields()
        this.dict = {
          id: 0,
          dicname: '',
          dictype: '',
          dicvalue: '',
          odr: 0,
          deleted: 0
        }
      },
      edit(tag, row){
        let self = this
        if (tag === 'update') {
          self.queryOne(row.id)
        }
        self.centerDialogVisible = true
      },
      save(){
        let self = this
        self.$refs['dict'].validate((valid) => {
          if (valid) {
            self.$http.post('/api/dict/save', self.dict)
              .then((response) => {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.centerDialogVisible = false,
                    self.message_ok()
                  self.query()
                } else {
                  self.message_error()
                }
              })
              .catch(function (response) {
                self.message_error()
              })
          } else {
            return false;
          }
        });
      },
      query(){
        let self = this
        self.$http.post('/api/dict', {
          'deleted': common.recordStatus.normal,
          'dicname': self.select_word,
          'pageSize': self.page.pageSize,
          'pageNum': self.page.pageNum
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.page = responseData.pageData
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      queryOne(id){
        let self = this
        self.$http.post('/api/dict', {
          'id': id,
          'pageSize': self.page.pageSize,
          'pageNum': self.page.currentPage,
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.dict = responseData.pageData.list[0]
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      message_error(message) {
        this.$notify.error({
          title: '错误',
          message: message === undefined ? '操作失败' : message
        });
      },
      message_ok(message) {
        this.$notify({
          title: '成功',
          message: message === undefined ? '操作成功' : message,
          type: 'success'
        });
      }
    }
  }
</script>
